import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled, { keyframes } from 'styled-components';

// 清新甜美少女主题动画定义
const bounceCute = keyframes`
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-8px) scale(1.05); }
  75% { transform: translateY(8px) scale(0.95); }
`;

const floatUpDown = keyframes`
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
`;

const shineSparkle = keyframes`
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
`;

const glowPulse = keyframes`
  0%, 100% { box-shadow: 0 0 20px rgba(249, 168, 212, 0.6); }
  50% { box-shadow: 0 0 35px rgba(249, 168, 212, 0.9), 0 0 15px rgba(110, 231, 183, 0.5); }
`;

const shimmerSweet = keyframes`
  0% { background-position: -300% 0; }
  100% { background-position: 300% 0; }
`;

const rotateSlow = keyframes`
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
`;

const appearFade = keyframes`
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
`;

// 清新甜美少女主题样式组件
const Wrapper = styled.div`
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    135deg,
    #fef2f2 0%,
    #fce7f3 25%,
    #f3e8ff 50%,
    #e0f2fe 75%,
    #dcfce7 100%
  );
  animation: ${appearFade} 2s ease-out;
`;

// 背景装饰层
const SweetBackground = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
`;

// 渐变光晕背景
const GradientBubbles = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 15% 25%, rgba(249, 168, 212, 0.3) 0%, transparent 30%),
    radial-gradient(circle at 85% 35%, rgba(110, 231, 183, 0.2) 0%, transparent 25%),
    radial-gradient(circle at 30% 70%, rgba(191, 219, 254, 0.25) 0%, transparent 20%),
    radial-gradient(circle at 70% 85%, rgba(251, 207, 232, 0.2) 0%, transparent 25%);
`;

// 进度条容器 - 清新甜美风格
const ProgressBarContainer = styled.div`
  width: 75%;
  max-width: 480px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.12),
    inset 0 3px 8px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(25px);
  animation: ${appearFade} 1.5s ease-out, ${glowPulse} 3.5s ease-in-out infinite;
  z-index: 10;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.8);
  
  // 装饰性小圆点边框
  &::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 17px;
    background: linear-gradient(45deg, 
      #f9a8d4 0%, 
      #6ee7b7 50%, 
      #bfdbfe 100%);
    z-index: -1;
    opacity: 0.3;
  }
`;

// 甜美进度条
const ProgressBar = styled.div<{ progress: number }>`
  height: 100%;
  background: linear-gradient(
    90deg,
    #f9a8d4,
    #ec4899,
    #8b5cf6,
    #6ee7b7
  );
  border-radius: 13px;
  width: ${props => props.progress}%;
  transition: width 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.3);
  
  // 甜美的闪光效果
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent
    );
    animation: ${shimmerSweet} 2s infinite linear;
  }
`;

// 装饰元素 - 可爱圆形
const CuteCircle = styled.div<{
    $size: number;
    $top: number;
    $left: number;
    $delay: number;
    $color: string;
    $scale: number;
}>`
  position: absolute;
  top: ${props => props.$top}%;
  left: ${props => props.$left}%;
  width: ${props => props.$size}px;
  height: ${props => props.$size}px;
  border-radius: 50%;
  background-color: ${props => props.$color};
  animation: 
    ${bounceCute} ${props => 6 + props.$delay}s ease-in-out infinite,
    ${floatUpDown} ${props => 8 + props.$delay * 2}s ease-in-out infinite;
  animation-delay: ${props => props.$delay}s;
  opacity: 0.7;
  z-index: 2;
  transform-origin: center;
  filter: blur(1px);
`;

// 装饰元素 - 闪烁星星
const SparkleStar = styled.div<{
    $size: number;
    $top: number;
    $left: number;
    $delay: number;
}>`
  position: absolute;
  top: ${props => props.$top}%;
  left: ${props => props.$left}%;
  width: ${props => props.$size}px;
  height: ${props => props.$size}px;
  background-color: #ffffff;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
  animation: 
    ${shineSparkle} ${props => 3 + props.$delay}s ease-in-out infinite,
    ${floatUpDown} ${props => 7 + props.$delay}s ease-in-out infinite;
  animation-delay: ${props => props.$delay}s;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  z-index: 3;
`;

// 装饰元素 - 彩色圆环
const ColorRing = styled.div<{
    $size: number;
    $top: number;
    $left: number;
    $delay: number;
    $thickness: number;
    $color: string;
}>`
  position: absolute;
  top: ${props => props.$top}%;
  left: ${props => props.$left}%;
  width: ${props => props.$size}px;
  height: ${props => props.$size}px;
  border-radius: 50%;
  border: ${props => props.$thickness}px solid ${props => props.$color};
  animation: 
    ${rotateSlow} ${props => 40 + props.$delay * 5}s linear infinite,
    ${floatUpDown} ${props => 15 + props.$delay}s ease-in-out infinite;
  animation-delay: ${props => props.$delay}s;
  opacity: 0.6;
  z-index: 1;
`;

// 装饰元素 - 小光点
const TinyGlow = styled.div<{
    $size: number;
    $top: number;
    $left: number;
    $delay: number;
    $color: string;
}>`
  position: absolute;
  top: ${props => props.$top}%;
  left: ${props => props.$left}%;
  width: ${props => props.$size}px;
  height: ${props => props.$size}px;
  border-radius: 50%;
  background-color: ${props => props.$color};
  animation: 
    ${shineSparkle} ${props => 2 + props.$delay}s ease-in-out infinite,
    ${floatUpDown} ${props => 6 + props.$delay}s ease-in-out infinite;
  animation-delay: ${props => props.$delay}s;
  box-shadow: 0 0 10px ${props => props.$color};
  opacity: 0.8;
  z-index: 4;
`;

const Bootpage: React.FC = () => {
    const navigate = useNavigate();
    const [progress, setProgress] = useState(0);

    // 清新活泼的进度条动画
    useEffect(() => {
        const timer = setInterval(() => {
            setProgress(prev => {
                // 活泼可爱的加载节奏
                let speed = 2;

                // 有韵律的速度变化
                if (prev < 25) speed = 2 + Math.sin(prev * 0.12) * 0.6;
                else if (prev < 50) speed = 2.5 + Math.sin(prev * 0.08) * 0.8;
                else if (prev < 75) speed = 2.2 + Math.random() * 1.2;
                else speed = 3.5 + (100 - prev) * 0.12; // 愉快地冲刺

                const newValue = prev + speed;
                if (newValue >= 100) {
                    clearInterval(timer);
                    return 100;
                }
                return newValue;
            });
        }, 100);

        return () => clearInterval(timer);
    }, []);

    // 进度完成后跳转到SideNav
    useEffect(() => {
        if (progress === 100) {
            const timer = setTimeout(() => {
                navigate('/SideNav/kongzhi');
            }, 700);
            return () => clearTimeout(timer);
        }
    }, [progress, navigate]);

    // 装饰元素的颜色数组
    const circleColors = [
        'rgba(249, 168, 212, 0.3)',
        'rgba(110, 231, 183, 0.3)',
        'rgba(191, 219, 254, 0.3)',
        'rgba(251, 207, 232, 0.3)',
        'rgba(165, 243, 252, 0.3)'
    ];

    const ringColors = [
        'rgba(249, 168, 212, 0.7)',
        'rgba(110, 231, 183, 0.7)',
        'rgba(191, 219, 254, 0.7)',
        'rgba(196, 181, 253, 0.7)'
    ];

    const glowColors = [
        '#ffffff',
        '#f9a8d4',
        '#6ee7b7',
        '#bfdbfe'
    ];

    // 生成可爱圆形装饰
    const cuteCircles = Array.from({ length: 15 }).map((_, i) => (
        <CuteCircle
            key={`circle-${i}`}
            $size={Math.random() * 60 + 30}
            $top={Math.random() * 90}
            $left={Math.random() * 95}
            $delay={Math.random() * 4}
            $color={circleColors[Math.floor(Math.random() * circleColors.length)]}
            $scale={0.8 + Math.random() * 0.4}
        />
    ));

    // 生成闪烁星星装饰
    const sparkleStars = Array.from({ length: 30 }).map((_, i) => (
        <SparkleStar
            key={`star-${i}`}
            $size={Math.random() * 6 + 3}
            $top={Math.random() * 100}
            $left={Math.random() * 100}
            $delay={Math.random() * 3}
        />
    ));

    // 生成彩色圆环装饰
    const colorRings = Array.from({ length: 6 }).map((_, i) => (
        <ColorRing
            key={`ring-${i}`}
            $size={Math.random() * 150 + 80}
            $top={Math.random() * 75}
            $left={Math.random() * 85}
            $delay={Math.random() * 2}
            $thickness={1 + Math.random() * 2}
            $color={ringColors[Math.floor(Math.random() * ringColors.length)]}
        />
    ));

    // 生成小光点装饰
    const tinyGlows = Array.from({ length: 25 }).map((_, i) => (
        <TinyGlow
            key={`glow-${i}`}
            $size={Math.random() * 3 + 1}
            $top={Math.random() * 100}
            $left={Math.random() * 100}
            $delay={Math.random() * 2.5}
            $color={glowColors[Math.floor(Math.random() * glowColors.length)]}
        />
    ));

    return (
        <Wrapper>
            {/* 甜美背景 */}
            <SweetBackground>
                <GradientBubbles />
            </SweetBackground>

            {/* 装饰元素 */}
            {colorRings}
            {cuteCircles}
            {sparkleStars}
            {tinyGlows}

            {/* 进度条 */}
            <ProgressBarContainer>
                <ProgressBar progress={progress} />
            </ProgressBarContainer>
        </Wrapper>
    );
};

export default Bootpage;
